<template>
    <div class="app-container">
        <FilterForm :data="filterData" @search="getList" labelWidth="86px" />

        <el-row :gutter="10" class="opr-btn-group mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="multiple"
                    @click="assigningCustomer"
                    v-hasPermi="['customer:customer:edit']"
                    >分配</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['customer:customer:add']"
                    >新增</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['customer:customer:edit']"
                    >修改</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['customer:customer:remove']"
                    >删除</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    :loading="exportLoading"
                    @click="handleExport"
                    v-hasPermi="['customer:customer:export']"
                    >导出</el-button
                >
            </el-col>
        </el-row>

        <Table
            :api="$Api.customer.list"
            ref="Table"
            :selection="true"
            @select="handleSelectionChange"
            height="60vh"
        >
            <el-table-column
                label="客户编号"
                align="center"
                prop="customerCode"
            />
            <el-table-column
                label="客户名称"
                align="center"
                prop="customerName"
            />
            <el-table-column
                label="公司全称"
                align="center"
                prop="corporateName"
            />
            <el-table-column
                label="联系人"
                align="center"
                prop="customerLinkman"
            />
            <el-table-column
                label="联系电话"
                align="center"
                prop="customerPhone"
                width="120"
            />
            <el-table-column
                label="微信号"
                align="center"
                prop="customerWechat"
                width="120"
            />
            <el-table-column
                label="客户类别"
                align="center"
                prop="customerTypeName"
            />
            <el-table-column
                label="客户地址"
                align="center"
                prop="customerAddress"
            />
            <el-table-column
                label="销售员"
                align="center"
                prop="businessPersonnel"
            />
            <el-table-column
                label="销售方数"
                align="center"
                prop="salesNumber"
            />
            <el-table-column
                label="销售金额"
                align="center"
                prop="salesAmount"
            />
            <el-table-column
                label="应收余额"
                align="center"
                prop="receivable"
            />
            <el-table-column
                label="录入时间"
                align="center"
                prop="inputTime"
                width="180"
            >
                <template slot-scope="scope">
                    <span>{{
                        parseTime(scope.row.inputTime, "{y}-{m}-{d}")
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="最后成交" align="center" prop="finalDeal" />
            <el-table-column
                label="最后拜访"
                align="center"
                prop="latestVisit"
            />
            <el-table-column
                label="客户需求"
                align="center"
                prop="customerDemand"
            />
            <el-table-column label="备注" align="center" prop="remark" />
            <el-table-column
                label="状态"
                align="center"
                key="status"
                fixed="right"
                width="100"
            >
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                        active-value="0"
                        inactive-value="1"
                        @change="handleStatusChange(scope.row)"
                    />
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                fixed="right"
                width="140"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click.native.stop="handleUpdate(scope.row)"
                        v-hasPermi="['customer:customer:edit']"
                        >修改</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click.native.stop="handleDelete(scope.row)"
                        v-hasPermi="['customer:customer:remove']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </Table>

        <!-- 添加或修改客户信息对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="700px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
                <el-row :gutter="10">
                    <el-col :span="10">
                        <el-form-item label="客户名称" prop="customerName">
                            <el-input
                                v-model="form.customerName"
                                placeholder="请输入客户名称"
                                maxlength="30"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="公司名称" >
                            <el-input
                                v-model="form.corporateName"
                                placeholder="请输入公司名称"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="客户类别" prop="customerType">
                            <el-select
                                v-model="form.customerType"
                                placeholder="请选择客户类别"
                            >
                                <el-option
                                    v-for="item in WoodCustomerCategoryList"
                                    :key="item.basicsId"
                                    :label="item.basicsName"
                                    :value="item.basicsId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="销售员" prop="businessPersonnel">
                            <SupplierSelect
                                :typeSelect = sales
                                v-model="form.businessPersonnel"
                                placeholder="请输入销售员"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="联系人" prop="customerLinkman">
                            <el-input
                                v-model="form.customerLinkman"
                                placeholder="请输入联系人"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="联系电话" prop="customerPhone">
                            <el-input
                                v-model="form.customerPhone"
                                placeholder="请输入联系电话"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="微信号" prop="customerWechat">
                            <el-input
                                v-model="form.customerWechat"
                                placeholder="请输入微信号"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="状态">
                            <el-select
                                v-model="form.status"
                                placeholder="请选择状态"
                            >
                                <el-option
                                    v-for="dict in statusOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="客户需求" prop="customerDemand">
                            <el-input
                                v-model="form.customerDemand"
                                type="textarea"
                                placeholder="请输入客户需求"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="20">
                        <el-form-item label="备注" prop="remark">
                            <el-input
                                v-model="form.remark"
                                type="textarea"
                                placeholder="请输入备注"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 分配销售员 -->
        <el-dialog
            :title="title"
            :visible.sync="openOne"
            width="600px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form
                ref="formSell"
                :model="formSell"
                :rules="rules"
                label-width="80px"
            >
                <el-form-item label="销售员" prop="businessPersonnel">
                    <el-select
                        v-model="formSell.businessPersonnel"
                        placeholder="请选择销售员"
                        clearable
                        size="small"
                    >
                        <el-option
                            v-for="item in businessList"
                            :key="item.userId"
                            :label="item.nickName"
                            :value="item.nickName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormCustomer"
                    >确 定</el-button
                >
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>

import SupplierSelect from "@/components/SupplierSelect";

export default {
    name: "info",
    components: {
        SupplierSelect,
    },
    data() {
        return {
            filterData: [
                { label: "名称", name: "customerName" },
                {
                    label: "客户类别",
                    name: "customerType",
                    type: "select",
                    select: {
                        option: [],
                        selectValue: "basicsId",
                        selectLabel: "basicsName",
                    },
                },
                {
                    label: "销售员",
                    name: "businessPersonnel",
                    type: "sales",
                },
                { label: "客户需求", name: "customerDemand" },
                {
                    label: "客户状态",
                    name: "status",
                    type: "select",
                    select: {
                        option: [],
                        selectValue: "dictValue",
                        selectLabel: "dictLabel",
                    },
                },
            ],
            // 组件替换条件
            sales: 'nickName',
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 状态数据字典
            statusOptions: [],
            // 客户类别数据
            WoodCustomerCategoryList: [],
            // 销售员列表
            businessList: [],
            // 销售员
            salesman: null,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            openOne: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                customerName: null,
                corporateName: null,
                customerLinkman: null,
                customerPhone: null,
                customerWechat: null,
                customerType: null,
                customerAddress: null,
                businessPersonnel: null,
                salesNumber: null,
                salesAmount: null,
                receivable: null,
                inputTime: null,
                finalDeal: null,
                latestVisit: null,
                customerDemand: null,
                status: null,
            },
            // 表单参数
            form: {},
            formSell: {},
            // 表单校验
            rules: {
                customerName: [
                    {
                        required: true,
                        message: "客户名称不能为空",
                        trigger: "blur",
                    },
                ],
                corporateName: [
                    {
                        required: true,
                        message: "公司名称不能为空",
                        trigger: "blur",
                    },
                ],
                customerLinkman: [
                    {
                        required: true,
                        message: "联系人不能为空",
                        trigger: "blur",
                    },
                ],
                customerType: [
                    {
                        required: true,
                        message: "客户类别不能为空",
                        trigger: "blur",
                    },
                ],
                businessPersonnel: [
                    {
                        required: true,
                        message: "销售员不能为空",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.getbusinessList();
        this.getCustomerCategoryList();
        this.getDicts("sys_normal_disable").then((res) => {
            let { data } = res;
            this.filterData.forEach( (v) =>{
               if( v.name == 'status') {
                    v.select.option = data;
               }
            })
            this.statusOptions = data;
        });
    },
    methods: {
        /** 查询客户信息列表 */
        getList(params) {
            this.$refs.Table.getData(params);
        },
        // 查询销售员列表
        getbusinessList() {
            this.$Api.user.list().then((res) => {
                    this.businessList = res.rows;
                });
        },
        /** 查询客户类别列表 */
        getCustomerCategoryList() {
            this.$Api.customer.category.list().then((res) => {
                    let { rows } = res
                    this.WoodCustomerCategoryList = rows;
                    this.filterData[1].select.option = rows;
                });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.openOne = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                customerCode: null,
                customerName: null,
                corporateName: null,
                customerLinkman: null,
                customerPhone: null,
                customerWechat: null,
                customerType: null,
                customerAddress: null,
                businessPersonnel: null,
                salesNumber: null,
                salesAmount: null,
                receivable: null,
                inputTime: null,
                finalDeal: null,
                latestVisit: null,
                customerDemand: null,
                status: "0",
                remark: null,
            };
            this.formSell = {
                businessPersonnel: null,
                customerCodes: null,
            };
            this.resetForm("form");
            this.resetForm("formSell");
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.customerCode);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "新增客户";
        },
        // 分配销售员
        assigningCustomer() {
            this.openOne = true;
            this.title = "分配销售员";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const customerCode = row.customerCode || this.ids;
            this.$Api.customer.info.detail(customerCode).then((res) => {
                this.form = res.data;
                this.open = true;
                this.title = "修改客户";
            });
        },
        handleStatusChange(row) {
            let text = row.status === "0" ? "启用" : "停用";
            this.$confirm(
                '确认要"' + text + '""' + row.businessPersonnel + '"用户吗?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
            .then( ()=>{
                let state = {
                    customerCode: row.customerCode,
                    status: row.status
                }
                this.$Api.customer.info.edit(state)
                .then( (res)=>{
                    let { code } = res;
                    if( code == 200 ) {
                        this.getList();
                        this.msgSuccess(text + "成功");
                    }
                })
            }).catch( ()=>{
                row.status = row.status === "0" ? "1" : "0";
            })

        },
        /** 提交按钮 */
        submitForm() {
            let { customerCode } = this.form;
            let { form } = this;
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if ( customerCode != null ) {
                        this.$Api.customer.info.update(form).then((res) => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        this.$Api.customer.info.add(form).then((res) => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        submitFormCustomer(row) {
            this.$refs["formSell"].validate((valid) => {
                if (valid) {
                    const customerCodes = row.customerCode || this.ids;
                    this.formSell.customerCodes = customerCodes;
                    this.$Api.customer.info.allot(this.formSell).then((res) => {
                        this.msgSuccess("分配成功");
                        this.openOne = false;
                        this.getList();
                    });
                }
            });
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const customerCodes = row.customerCode || this.ids;
            this.$confirm(
                '是否确认删除客户信息"' + customerCodes + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
             .then( ()=>{
                this.$Api.customer.info.del(customerCodes)
                .then( (res)=>{
                    let { code } = res;
                    if( code == 200 ) {
                        this.getList();
                        this.msgSuccess("删除成功");
                    }
                })
            }).catch( ()=>{})
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出所有客户信息数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then( ()=>{
                this.exportLoading = true;
                this.$Api.customer.info.export(queryParams)
                .then( (res)=>{
                    let { code, msg} = res;
                    if( code == 200 ) {
                         this.download(msg);
                        this.exportLoading = false;
                    }
                })
            }).catch( ()=>{})
        },
    },
};
</script>
<style lang="scss" scoped>
.el-icon-zoom-in {
    color: #333;
    font-size: 12px;
}
</style>
